<template>  
  <div>  
    <Title v-bind:title="title"></Title> 
    <div ref="chartContainer" style="height: 150px;"></div>  
  </div>  
</template>  
  
<script setup>  
import Title from './Title.vue';
const title=ref('环境工程');
import { ref, onMounted, onUnmounted } from 'vue';  
import { Bar } from '@antv/g2plot';  
  
const chartContainer = ref(null);  
let chartInstance = null;  

// 示例数据  
const humidityData = [  
  { category: 'A区', wet: 40 },  
  { category: 'B区', wet: 55 },  
  { category: 'C区', wet: 30 },  
  { category: 'D区', wet: 70 },  

];  
  
// 初始化图表的函数  
function initChart() {  
  if (chartContainer.value) {  
    chartInstance = new Bar(chartContainer.value, {  
      data: humidityData,  
      xField: 'category',
      yField: 'wet',      
      label: {  
        position: 'middle', // 标签位置  
        style: {  
          fill: '#fff',  
          opacity: 0.7,  
        },  
      },  
      xAxis: {  
        label: {  
          
        },  
      },  
      yAxis: {  
        label: {  
       
        },  
      },  
      tooltip: {  
        shared: true, 
      },  
    });  
  
    chartInstance.render();  
  }  
}  
onMounted(() => {  
  initChart();  
});  
</script>  
  
<style scoped lang="less">  
</style>